  function addAnim(obj,step) {

    $(obj[0].target).removeClass().addClass(obj[0].name + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    	if(step.length > 0){
    		var tempTarget = step.shift();
    		addAnim(tempTarget,step);
    	}
      $(this).removeClass();
    });
    if(obj.length>1){
    	for(var i=1;i<obj.length;i++){
		    $(obj[i].target).removeClass().addClass(obj[i].name + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
		      $(this).removeClass();
		    });
	    }
    }
    
  };


  function execAnim(num) {
  	state[num] = true;
  	num = num-1;
  	var tempTarget = step[num].shift();
  	if( step[num].length>0){
      	addAnim(tempTarget, step[num]);
      }else{
      	addAnim(tempTarget);
      }
    };

var step =[
	// page 1
	[
		[
			{'target': '#page1-line1',
			'name': 'fadeInLeft'},
			{'target': '#page1-line2',
			'name': 'fadeInLeft'}
		],
		[
			{'target': '#page1-line3',
			'name': 'fadeInLeft'},
			{'target': '#page1-line4',
			'name': 'fadeInLeft'}
		],
		[
			{'target': '#page1-product1',
			'name': 'zoomIn'}
		]
	],
	// page 2
	[
		[
			{'target': '#page2-product1',
			'name': 'zoomIn'}
		],
		[
			{'target': '#page2-line1',
			'name': 'fadeInLeft'},
			{'target': '#page2-line2',
			'name': 'fadeInRight'}
		],
	],
	// page 3
	[
		[
			{'target': '#page3-product1',
			'name': 'tada'}
		],
		[
			{'target': '#page3-details',
			'name': 'zoomIn'}
		],
		[
			{'target': '#page3-line1',
			'name': 'fadeInLeft'}
		],
		[
			{'target': '#page3-line2',
			'name': 'fadeInLeft'}
		],
		[
			{'target': '#page3-line3',
			'name': 'fadeInLeft'}
		]
	],
	// page 4
	[
		[
			{'target': '#page4-product1',
			'name': 'fadeInDown'}
		],
		[
			{'target': '#page4-line1',
			'name': 'zoomIn'}
		],
		[
			{'target': '#page4-product2',
			'name': 'fadeInLeft'}
		],
		[
			{'target': '#page4-line2',
			'name': 'zoomIn'}
		],
		[
			{'target': '#page4-product3',
			'name': 'fadeInRight'}
		],
		[
			{'target': '#page4-line3',
			'name': 'zoomIn'}
		],
		[
			{'target': '#page4-line4',
			'name': 'tada'}
		]
	],
	// page 5
	[
		[
			{'target': '#show-page5',
			'name': 'zoomIn'}
		],
		[
			{'target': '#page5-line1',
			'name': 'zoomIn'}
		],
	],
	// page 6
	[
		[
			{'target': '#page6-product1',
			'name': 'zoomIn'}
		],
		[
			{'target': '#page6-arrow1',
			'name': 'fadeInLeftBig'},
			{'target': '#page6-line1',
			'name': 'fadeInLeft'}

		],
		[
			{'target': '#page6-arrow2',
			'name': 'fadeInLeftBig'},
			{'target': '#page6-line2',
			'name': 'fadeInLeft'}

		],
		[
			{'target': '#page6-arrow3',
			'name': 'fadeInLeftBig'},
			{'target': '#page6-line3',
			'name': 'fadeInLeft'}

		],
		[
			{'target': '#page6-arrow4',
			'name': 'fadeInLeftBig'},
			{'target': '#page6-line4',
			'name': 'fadeInLeft'}

		],
		[
			{'target': '#page6-arrow5',
			'name': 'fadeInRightBig'},
			{'target': '#page6-line5',
			'name': 'fadeInRight'}

		],
		[
			{'target': '#page6-arrow6',
			'name': 'fadeInRightBig'},
			{'target': '#page6-line6',
			'name': 'fadeInRight'}

		],
	],
	// page 7
	[
		[
			{'target': '#page7-product1',
			'name': 'zoomIn'}
		],
		[
			{'target': '#page7-arrow1',
			'name': 'fadeInRightBig'},
			{'target': '#page7-line1',
			'name': 'fadeInRight'}

		],
		[
			{'target': '#page7-line2',
			'name': 'fadeInRight'}

		]
	],
	// page 8
	[
		[
			{'target': '#page8-product2',
			'name': 'zoomIn'}
		],
		[
			{'target': '#page8-product1',
			'name': 'fadeInDown'}

		],
		[
			{'target': '#page8-line1',
			'name': 'jello'}

		]
	],
	// page 9
	[
		[
			{'target': '#page9-product1',
			'name': 'fadeInLeft'}

		],
		[
			{'target': '#page9-line1',
			'name': 'bounce'}

		]
	],
	// page 10
	[
		[
			{'target': '#page10-block1',
			'name': 'fadeInLeft'}

		],
		[
			{'target': '#page10-block2',
			'name': 'fadeInLeft'}

		],
		[
			{'target': '#page10-block3',
			'name': 'fadeInLeft'}

		],
		[
			{'target': '#page10-block4',
			'name': 'fadeInRight'}

		],
		[
			{'target': '#page10-block5',
			'name': 'fadeInRight'}

		],
		[
			{'target': '#page10-block6',
			'name': 'fadeInRight'}

		]
	],
];
var state = [true,false,false,false,false,false,false,false,false,false,false];
$(window.document).scroll(function () {
    var scrolltop = $(document).scrollTop();
    if(scrolltop>372 && state[2] == false){
    	setTimeout(execAnim(2),1500);
    }else if(scrolltop>1070 && state[3] == false){
    	setTimeout(execAnim(3),1500);
    }else if(scrolltop>1800 && state[4] == false){
    	setTimeout(execAnim(4),1500);
    }
    else if(scrolltop>2550 && state[5] == false){
    	setTimeout(execAnim(5),1500);
    }else if(scrolltop>3200 && state[6] == false){
    	setTimeout(execAnim(6),1500);
    }else if(scrolltop>3800 && state[7] == false){
    	setTimeout(execAnim(7),1500);
    }else if(scrolltop>4500 && state[8] == false){
    	setTimeout(execAnim(8),1500);
    }else if(scrolltop>5200 && state[9] == false){
    	setTimeout(execAnim(9),1500);
    }else if(scrolltop>5650 && state[10] == false){
    	setTimeout(execAnim(10),1500);
    }
});

var isIE = function(){
    var b = document.createElement('b')
    b.innerHTML = '<!--[if IE]><i></i><![endif]-->'
    return b.getElementsByTagName('i').length === 1
}

$(document).ready(function(){

	var IEstate = isIE();
	if(IEstate){
		 $(".hidden").removeClass("hidden");
	}else{
			try{
				setTimeout(execAnim(1),2000);
			}catch(error){
				console.log('can not run anim');
			}
	}

	$('#show-page5').width($(window).width()).height($(window).height());

	    //浏览器大小改变时自动变换大小
        window.addEventListener( 'resize', onWindowResize, false );
        function onWindowResize() {
        	$('#show-page5').width($(window).width()).height($(window).height());
        }
	
});